<div id="campaign">
<div id="funding_area">
  <div class="container clearfix">

    <div class="center">
      <h2 class="campaign_title"><a href="<%= campaign_home_path(@campaign) %>"><%= @campaign.name %></a></h2>
    </div>

    <div class="clearfix">
      <% if @campaign.media_type == 'video' %>

        <div id="video">
          <% if @campaign.video_placeholder.file? %>
            <div id="video_image">
              <%= image_tag @campaign.video_placeholder.url(:main), alt: "video_place_holder" %>
            </div>
            <% if !@campaign.video_embed_id.blank? %>
              <div id="player" class="hidden" style="display: none;">
                <object width="512" height="385">
                  <param name="movie" value="https://www.youtube.com/v/<%= @campaign.video_embed_id %>?autohide=1&showinfo=0&rel=0&autoplay=1" />
                  <param name="allowFullScreen" value="true" />
                  <param name="allowscriptaccess" value="always" />
                  <embed src="https://www.youtube.com/v/<%= @campaign.video_embed_id %>?autohide=1&showinfo=0&rel=0&autoplay=1" type="application/x-shockwave-flash" width="512" height="385" allowscriptaccess="always" allowfullscreen="true"></embed>
                </object>
              </div>
            <% end %>
          <% else %>
            <% if !@campaign.video_embed_id.blank? %>
              <iframe width='512' height='385' src="https://www.youtube.com/embed/<%= @campaign.video_embed_id %>?rel=0"></iframe>
            <% end %>
          <% end %>
        </div>

      <% else %>

        <div id="image">
          <%= image_tag @campaign.main_image.url(:main), alt: "project_image" %>
        </div>

      <% end %>

      <div id="backing">
        <ul>

          <% if @campaign.goal_type == 'dollars' %>
            <li class="stats" id="backers">
              <%= number_with_delimiter @campaign.number_of_contributions.to_i, :delimiter => "," %>
              <span><%= @campaign.contributor_reference.pluralize(@campaign.number_of_contributions.to_i) %></span>
            </li>
            <li class="stats">
              <%= number_to_currency @campaign.raised_amount.ceil, :precision => 0 %>
              <span>of <%= number_to_currency @campaign.goal_dollars.ceil, :precision => 0 %></span>
            </li>
          <% else %>
            <li class="stats">
              <%= @campaign.orders %> <%= @campaign.contributor_reference.pluralize(@campaign.orders) %>
              <span>of <%= @campaign.goal_orders %> needed</span>
            </li>
          <% end %>

          <li class="stats" id="days" date-element="<%= @campaign.expiration_date.to_i %>" >
          </li>
        </ul>

        <% if @campaign.raised_amount < @campaign.goal_dollars %>
          <div id='progress_bg' class='small'>
            <div id='progress' class='' style='width: <%= @campaign.tilt_percent.to_i %>%;'>
            </div>
          </div>
        <% else %>
          <div id="progress_bg">
            <div id="progress">
            </div>
            <div id='progress_text'><%= @campaign.tilt_percent.ceil %>% <%= @campaign.progress_text %></div>
          </div>
        <% end %>

        <div id="reserve_container">
          <div class="call_to_action_button">
            <% if @campaign.expired? %>
              <% if @campaign.include_rewards_claimed? %>
                <div id="backing">
                  <ul>
                    <li class="stats-awards">
                      <%= @campaign.rewards_claimed %> Claimed Rewards
                    </li>
                  </ul>
                </div>
              <% end %>
              <span class="blue_button expired">
                <%= @campaign.primary_call_to_action_button %>
              </span>
            <% else %>
              <a href="<%= url_for checkout_amount_path(@campaign) %>" class="blue_button" id="main_cta">
                <%= @campaign.primary_call_to_action_button %>
              </a>
            <% end %>
          </div>
          <div class="powered_by_crowdtilt">
            <a href="http://open.tilt.com/?utm_source=powered_by&utm_medium=base&utm_campaign=link_powered_by" target="_blank"><%= image_tag 'powered_by_tilt.png', width: "104px" %></a>
          </div>
          <div class="call_to_action_description">
            <%= raw(@campaign.primary_call_to_action_description) %>
          </div>
        </div>
      </div>
    </div>

    <div class="share">
      <%= render 'shared/share_buttons', campaign: @campaign, settings: @settings %>
    </div>

  </div>
</div>

<div id="campaign_body">
  <div class="container clearfix">
    <div class="main_content <%= 'narrow' if @campaign.rewards? %>">
      <% if @campaign.include_comments %>
        <div class="tabbable <%= 'narrow' if @campaign.rewards? %>">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Description</a></li>
            <li><a href="#tab2" data-toggle="tab" onclick="load_disqus()">Comments <span class="badge badge-info" id="count"></span></a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade active in" id="tab1">
              <%= raw(@campaign.main_content) %>
            </div>
            <div class="tab-pane fade in" id="tab2">
              <div class="comment_content">
                <div id="disqus_thread"></div>
                <script type="text/javascript">
                  var disqus_shortname = '<%= @campaign.comments_shortname.downcase %>';
                  var disqus_identifier = '<%= @campaign.slug %>';
                  var disqus_title = '<%= @campaign.name %>';
                  var disqus_URL = '<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>';
                  var disqus_developer = <%= Rails.env.production? ? 0 : 1 %>;
                  var disqus_loaded = false;
                  var load_disqus = function() {
                    if (!disqus_loaded) {
                      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                      disqus_loaded = true;
                    }
                  };
                </script>
                <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments.</a></noscript>
              </div>
            </div>
          </div>
        </div>
      <% else %>
        <%= raw(@campaign.main_content) %>
      <% end %>
    </div>

    <% if @campaign.rewards? %>
      <div class="rewards_sidebar">
        <h3><%= @campaign.reward_reference.pluralize.titleize %></h3>
        <ul>
          <% @campaign.rewards.order("price ASC").each do |reward| %>
            <% if reward.visible? %>
              <li id="rewards_click">
                <a href="<%= url_for(checkout_amount_path(@campaign, reward: reward.id)) %>"  onclick="<%= 'return false' if reward.sold_out? || @campaign.expired? %>" class="<%= 'disabled' if reward.sold_out? || @campaign.expired? %>">
                  <p class="price"><%= short_price(reward.price, '$') %></p>
                  <p class="title"><%= reward.title %></p>
                  <% if reward.image_url.present? %><p class="image"><img src="<%= reward.image_url %>"></p><% end %>
                  <p class="description"><%= reward.description %></p>
                  <p class="delivery">Estimated Delivery: <%= reward.delivery_date %></p>
                  <% if @campaign.expired? %>
                    <% if reward.include_claimed? %>
                      <p class="claimed">
                        <%= reward.payments.successful.count %> <%= "of #{reward.number}" unless reward.unlimited? %> claimed <%= '(All gone!)' if reward.sold_out? %>
                      </p>
                    <% end %>
                  <% else %>
                    <p class="claimed">
                      <%= reward.payments.successful.count %> <%= "of #{reward.number}" unless reward.unlimited? %> claimed <%= '(All gone!)' if reward.sold_out? %>
                    </p>
                  <% end %>
                </a>
              </li>
            <% end %>
          <% end %>
        </ul>
      </div>
    <% end %>
  </div>
</div>

<div id="second_call_to_action">
  <div class="container">
    <div><%= raw(@campaign.secondary_call_to_action_description) %></div>
    <div class="center">
      <% if @campaign.expired? %>
          <span class="blue_button expired">
            <%= @campaign.secondary_call_to_action_button %>
          </span>
      <% else %>
        <a href="<%= url_for checkout_amount_path(@campaign) %>" class="blue_button" id="secondary_cta">
          <%= @campaign.secondary_call_to_action_button %>
        </a>
      <% end %>
      <div class="powered_by_crowdtilt">
        <a href="http://open.tilt.com/?utm_source=powered_by&utm_medium=base&utm_campaign=link_powered_by" target="_blank"><%= image_tag 'powered_by_tilt.png', width: "104px" %></a>
      </div>
    </div>
  </div>
</div>

<% if @campaign.faqs.count > 0 %>
  <div id="faq">
    <div class="container clearfix">
      <div class="center">
        <h3>Frequently Asked Questions</h3>
      </div>
      <ul>
        <% for i in 0...(@campaign.faqs.count/2.0).ceil %>
          <li class=''>
            <details class=''>
              <summary class=''><%= @campaign.faqs[i].question %></summary>
              <p><%= raw(@campaign.faqs[i].answer.gsub("\n", '<br/>')) %></p>
            </details>
          </li>
        <% end %>
      </ul>
      <ul class="col2">
        <% for i in (@campaign.faqs.count/2.0).ceil...@campaign.faqs.count %>
          <li class=''>
            <details class=''>
              <summary class=''><%= @campaign.faqs[i].question %></summary>
              <p><%= raw(@campaign.faqs[i].answer.gsub("\n", '<br/>')) %></p>
            </details>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
<% end %>
</div>

<% if @campaign.include_comments %>
  <div class="hide"><a href="<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>#disqus_thread" data-disqus-identifier="<%= @campaign.slug %>" id="parse"></a></div>
  <script type="text/javascript">
    var disqus_shortname = '<%= @campaign.comments_shortname.downcase %>';
    (function () {
      $.getScript("//disqus.com/forums/"+disqus_shortname+"/get_num_replies.js?url0="+encodeURIComponent("<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>"));
    }());
  </script>
  <script>
    window.onload = function(){

      var parse = document.getElementById('parse');
      var count = document.getElementById('count');

      count.innerHTML=parseInt(parse.innerHTML,10);
    };
  </script>
<% end %>
